<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/1/27
  Time: 11:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div id="app">
    <table border="1" align="center">
        <tr>
            <td>编号</td>
            <td>英雄</td>
            <td>法器</td>
            <td>攻击力</td>
            <td>操作</td>
        </tr>
        <tr v-for="(hero,index) in pageInfo.list" :key="index">
            <td>{{hero.id}}</td>
            <td>{{hero.name}}</td>
            <td>{{hero.weapon}}</td>
            <td>{{hero.atk}}</td>
            <td><button @click="deleteHero(hero.id)">删除</button></td>
        </tr>
    </table>
    {{msg}}
    <button v-if="pageInfo.hasPreviousPage" @click="selectByPage(pageInfo.prePage)">上一页</button>
    <button v-if="pageInfo.hasNextPage" @click="selectByPage(pageInfo.nextPage)">下一页</button>
</div>
<script src="./js/vue-2.6.12.js"></script>
<script src="./js/axios-0.21.0.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            pageInfo:[],
            msg:""
        },
        methods:{
            selectByPage(pageNo){
                axios({
                    method:"get",
                    url:"hero/selectByPage.do",
                    params:{
                        pageNo:pageNo
                    }
                }).then((resp)=>{
                    this.pageInfo=resp.data;
                })
            },
            deleteHero(id){
                //发出ajax请求删除数据
                axios({
                    method:"get",
                    url:"hero/delete.do",
                    params:{
                        id:id
                    }
                }).then((resp)=>{
                    this.msg=resp.data.msg;
                    //再次查询数据
                    this.selectByPage(1);
                })


            }
        },
        created(){
            this.selectByPage(1);
        }
    });
</script>
</body>
</html>
